<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="flag1" />苹果
    <input type="checkbox" v-model="flag2"/>橘子
    <input type="checkbox" v-model="flag3"/>香蕉
    <input type="button" value="全选" @click="checkAll"/>
    <input type="button" value="全不选" @click="unCheckAll"/>
    <input type="button" value="反选" @click="fanxuan"/>
</div>
<script type="text/javascript" src="js/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            flag1:true,
            flag2:true,
            flag3:true
        },
        methods:{
            checkAll(){
                this.flag1=true;
                this.flag2=true;
                this.flag3=true;
            },
            unCheckAll(){
                this.flag1=false;
                this.flag2=false;
                this.flag3=false;
            },
            fanxuan(){
                this.flag1=!this.flag1;
                this.flag2=!this.flag2;
                this.flag3=!this.flag3;
            }
        }
    })
</script>
</body>
</html>